<div ng-init="main_event.init();" class="kmi-layout-content QT06-main-content">
    <div class="kmi-header-row">
        <div  class="header-title" ng-bind="main_event.headerTitle"></div>
        <button ng-click="main_event.search_page_change_icon();">
            <img src='image/smes_v340/header/W_Com_Search_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.model_load_open_icon();">
            <img src='image/smes_v340/header/W_Com_History_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.panel_item_menu_open();">
            <img src='image/smes_v340/header/W_Com_DescendingPower_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.model_save_open_icon();">
            <img src='image/smes_v340/header/W_Com_Save_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <button ng-click="main_event.download();">
            <img src='image/smes_v340/header/W_MoveLastPage_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button>
        <!-- 暫時用不到 -->
        <!-- <button ng-click="main_event.tree_collapse();">
            <img src='image/smes_v340/header/W_Com_Layout_Change1_nor_32.png'></img>
            <div class='kmi-can-click'></div>
        </button> -->
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page">
            <div class="content-panel">
                <div class="tree-panel animation">
                    <div class="tree-header">
                        <label ng-bind="'QT06.tree.title' | translate"></label>
                    </div>
                    <div class="tree-content">
                        <script type="text/ng-template" id="QT06_tree_menu.html">   
                            <div style="display:flex;flex-direction:row;padding: 0px 0px;" ui-tree-handle>
                                <div ng-class="{'line':node.show_line}" class="line"></div>
                                <div style="flex:1;">
                                    <div style="display:flex;flex-direction:row;align-items:center;white-space:nowrap;" ng-class="{'tree-item-active animation':main_event.bom_select_id == this.$id, 'odd': node.tlevel % 2 === 1, 'even': node.tlevel % 2 === 0}">
                                        <div class="node-wrapper" ng-click="node.tree_toggle(this,node)">
                                            <div class="label-container"><label>{{node.tlevel}}</label></div>
                                            <div class="lot-code-container"><label>{{node.NO}}</label></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div ui-tree-nodes ng-model="node.sList" ng-show="collapsed">
                                <div data-collapsed = "true" ng-repeat="node in node.sList" ui-tree-node ng-include="'QT06_tree_menu.html'"></div>
                            </div>
                        </script>
                        <div ui-tree data-drag-enabled ="false" style="overflow:auto;width:100%;height:100%;" class="wrapper">
                            <div ui-tree-nodes ng-model="main_event.bom_detail" id="tree-root">
                                <div data-scroll-container=".wrapper" data-collapsed = "true" ng-repeat="node in main_event.bom_detail" ui-tree-node ng-include="'QT06_tree_menu.html'"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="vertical-border"></div>
                <div class="info-panel">
                    <!-- 20220719 modify by Alan for#113392 : 新增導航欄scrollbar -->
                    <div class="perfect-scrollbar tab-container">
                        <div class="tab-panel">
                            <div ng-click="main_event.panel_tab_active(item)" ng-repeat="item in main_event.traceNameList | orderBy: 'SEQ'" ng-if="item.SEQ != 99" ng-class="{'active':item.active}" ><label ng-bind="item.TRACENAME"></label><div class="bottom-line"></div></div>
                        </div>
                    </div>
                    <div class="info-list">
                        <div class="panel-wrapper">
                            <div ng-repeat="item in main_event.traceNameList | orderBy: 'SEQ'" class="info-item-layout" id="{{ item.TRACENO }}" ng-if="item.SEQ != 99">
                                <div class="title-range">
                                    <div>
                                        <label ng-bind="item.TRACENAME"></label>
                                    </div>
                                    <div> 
                                        <i ng-click="main_event.sheet_grid_open(item)" class="material-icons">menu</i>
                                    </div>
                                </div>
                                <div style="flex: 1;min-height:200px;" >
                                    <div class="panel"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
